<template>
  <div class="album">
    <div class="album_box">
      <div class="img-box">
        <img v-lazy="album.picUrl" alt="">
        <div style="font-size:12px;line-height: 24px">
          {{album.publishTime | filterDate}}
        </div>
      </div>
      <div>
        <div class="album-title">
          <span>{{ album.name }}</span>
          <span @click="playAll">播放全部</span>
        </div>
        <table id="table">
          <tr
            class="detail-info"
            :class="{ active: currentIndex === index }"
            v-for="(item, index) in songs"
            :key="index"
            @dblclick="addSong(index)"
            @click="trClick(index)"
          >
            <td class="other">
              <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) === -1"
                src="~@/assets/img/songlistdetail/collect2.svg"
                alt=""
              />
              <img
                @click="btnClick(index)"
                v-show="spanIndex.indexOf(index) !== -1"
                src="~@/assets/img/songlistdetail/collect3.svg"
                alt=""
              />
              <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
            </td>
            <td class="title"
                :class="{dbActive: $store.state.playContent.playId === item.id}">
              {{ item.name }}
            </td>
            <td class="time">{{item.dt | filterTime}}</td>
          </tr>
        </table>
      </div>
    </div>

  </div>
</template>

<script>
import { home } from "@/network/home";
import { format,formatDate } from '@/components/common/utilis'


export default {
  name: "SingerAlbumItem",
  props:{
    albumId:{
      type:Number,
    }
  },
  data(){
    return {
      id:this.$route.params.id, //歌手id
      songlist:[],//‘播放全部’歌单列表
      spanIndex: [], //保存歌曲的索引（用于点赞和取消点赞）
      currentIndex: "", //单击相应歌曲背景颜色改变
      album:{},   //专辑描述
      songs:[],   //专辑歌曲
    }
  },
  watch:{
    //监听歌手id是否变化，变化就更新数据
    'albumId'(){
      this.getSingerAlbumSongs(this.albumId)
    },
  },
  created() {
    //请求歌手专辑里的歌曲数据
    this.getSingerAlbumSongs(this.albumId)
  },
  filters:{
    // 格式化歌曲时间
    filterTime(value){
      return format(value/1000)
    },
    // 格式化专辑发布时间
    filterDate(value){
      const date = new Date(value)
      return formatDate(date,'yyyy-MM-dd')
    },
  },
  methods:{
    //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
    btnClick(index) {
      let result = this.spanIndex.indexOf(index);
      if (result === -1) {
        this.spanIndex.push(index);
      } else this.spanIndex.splice(result, 1);
    },
    //点击tr改变背景颜色的方法
    trClick(index) {
      this.currentIndex = index;
    },
    //双击添加歌曲信息的方法
    addSong(index) {
      const songContent = {};
      songContent.playId = this.songs[index].id;
      songContent.playImg = this.songs[index].al.picUrl;
      songContent.playName = this.songs[index].name;
      songContent.player = this.songs[index].ar[0].name;
      songContent.a = ''
      this.$store.commit("addSongs", songContent);
    },
    //播放全部的方法
    playAll(){
      this.songs.forEach(item => {
        const songContent = {};
        songContent.playId = item.id;
        songContent.playImg = item.al.picUrl;
        songContent.playName = item.name;
        songContent.player = item.ar[0].name;
        this.songlist.push(songContent)
      })
      //发送播放全部事件给footer,告诉他改变下面的播放状态
      this.$bus.emit('playAll')
      //将歌曲列表保存到vuex
      this.$store.commit('playAll', this.songlist)
    },

    //获取歌手专辑里歌曲的函数
    getSingerAlbumSongs(id){
      home.getSingerAlbumSongs(id).then(res => {
        this.album = res.data.album
        this.songs = res.data.songs
      })
    },

  },
}
</script>

<style scoped>
.album{
  padding: 50px 10px 20px 50px;
}

table {
  font-size: 13px;
}
table tr:nth-child(odd) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  line-height: 33px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.title-info td {
  font-size: 14px;
  color: #959090;
}
.other {
  width: 100px;
  color: #959090;
  padding-left: 8px;
}
.other img {
  position: relative;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 6px;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 600px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.time {
  width: 100px;
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
.album-title span:nth-child(1){
  color: #2a2727;
  line-height: 35px;
  font-weight: 700;
}
.album-title span:nth-child(2){
  margin-left: 20px;
  padding: 3px 10px;
  font-size: 14px;
  line-height: 35px;
  border-radius: 15px;
  background-color: #d6d6ec;
  cursor: pointer;
  border: 1px solid #a9a9bb;
  transition: .3s;
}
.album-title span:nth-child(2):hover{
  color: #e4e4f5;
  background-color: #aaa3a3;
}
.album_box{
  display: flex;
  justify-content: space-between;
}
.album_box .img-box img{
  width: 150px;
  height: 150px;
  border-radius: 4px;
}
</style>
